<template>
	<view class="page index">
		<view class="form">
			<common-input
			  title="项目完结状态" 
				v-model="status"
				:border-bottom="false"
				:require="false"
				:disabled="true"
			>
			</common-input>
			<block v-if="status == '异常完结'">
				<common-input
				  title="异常完结原因" 
					v-model="reason"
					:require="false"
					:disabled="true"
				>
				</common-input>
				<view class="text">
					<view class="title">
						<view>
							异常完结原因说明
						</view>
						<view class="require"></view>
					</view>
					<textarea v-model="reasonExplain" placeholder="请输入" placeholder-class="place"></textarea>
				</view>
			</block>
			<picker mode="selector" :range="memberList" @change="selectMember">
				<view class="picker">
					<common-input
					  title="档案保管人" 
						placeholder="请选择" 
						v-model="memberIndex < 0 ? '' : memberList[memberIndex]"
						:border-bottom="false"
						:disabled="true"
					>
					</common-input>
				</view>
			</picker>
			<common-input
			  title="档案存放位置" 
				placeholder="请填写档案存放位置" 
				v-model="address"
				:require="false"
			>
			</common-input>
			<view class="text">
				<view class="title">
					<view>
						归档说明
					</view>
					<view class="require"></view>
				</view>
				<textarea v-model="explain" placeholder="请输入" placeholder-class="place"></textarea>
			</view>
			<update-file title="凭证附件" @update="updatefiles"></update-file>
		</view>
		<view class="footer">
			<button @click="save">提交审批</button>
		</view>
	</view>
</template>

<script>
	import commonInput from "@/components/commonInput.vue";
	import updateFile from "@/components/updateFile.vue";
	import {getMemberListApi, applyDocumentProjectApi} from "@/api/project_api.js";
	export default{
		data() {
			return{
				id: 0, //项目id
				status: '',
				reason:'',
				reasonExplain:'',
				memberIndex: -1,
				memberList: ['暂无成员，请先添加项目成员'],
				memberId: [],//项目成员id
				address:'',
				explain: '',
				fileUrls: []
			}
		},
		components: {
			commonInput,
			updateFile
		},
		onLoad(e) {
			this.id = e.id;
			if(e.fileAbnormalReason == '' || e.fileAbnormalReason == null || e.fileAbnormalReason == undefined){
				this.status = '正常完结';
			}else{
				this.status ='异常完结';
				switch(Number(e.fileAbnormalReason)){
					case 0: {
						this.reason = '未签约';
						break;
					}
					case 1: {
						this.reason = '未实施';
						break;
					}
					case 2: {
						this.reason = '未交付';
						break;
					}
					case 3: {
						this.reason = '未回款';
						break;
					}
				}
			}
			this.getMemberList();
		},
		methods:{
			// 获取项目团队成员
			async getMemberList(){
				let res = await getMemberListApi({
					bizType: 9,
					bizId: this.id
				}).catch(() => {
					return Promise.reject();
				})
				this.memberList = res.data.map(item => item.nickname);
				this.memberId = res.data.map(item => item.userId);
			},
			selectMember(e){
				this.memberIndex = e.detail.value;
			},
			updatefiles(e){
				this.fileUrls = e.map(item => item.path);
			},
			save(){
				if(this.status == '异常完结' && this.reasonExplain == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入异常完结原因'
					})
					return;
				}
				if(this.memberIndex == -1){
					uni.showToast({
						icon: 'none',
						title: '请选择归档保管人'
					})
					return;
				}
				if(this.explain == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入归档说明'
					})
					return;
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				applyDocumentProjectApi({
					projectId: this.id,
					reasonDescription: this.reasonExplain,
					managerUserId: this.memberId[this.memberIndex],
					savePosition: this.address,
					fileDescription: this.explain,
					fileUrls: this.fileUrls
				}).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功！'
					})
					setTimeout(() => {
						uni.navigateBack();
					},1500)
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 0;
		@include flex-c;
		.form{
			flex: 1 0 0;
			overflow: auto;
			.text{
				border-bottom: 4rpx #e5e5e5 solid;
				padding: 12rpx 30rpx;
				.title{
					font-size: 28rpx;
					color: #101010;
					padding: 0 0 16rpx;
					display: flex;
					align-items: center;
					.require{
					  height: 28rpx;
					  width: 6rpx;
					  background-color: #c24135;
					  margin-left: 10rpx;
				  }
				}
				textarea{
					font-size: 28rpx;
					color: #909090;
					height: 125rpx;
				}
				.place{
					font-size: 28rpx;
					color: #909090;
				}
			}
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 130rpx;
			button{
				@include button;
				background-color: #198AFA;
				color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				width: 100%;
			}
		}
	}
</style>